<template>
<div class="flex flex-column">
  <div class="flex-1"></div>
  <div class="download-container">
      <div v-for="(item,index) of versions" :key="index" class="v-list">
        <h3 class="title">{{item.title}} <small class="date">{{item.date}}</small></h3>
        <div class="note">{{item.desc}}</div>
        <a v-for="(app, index2) of item.apps" :key="index + '-' + index2" :href="app.url">{{app.name}}</a>
      </div>
  </div>
  <div class="flex-1"></div>
</div>
</template>

<script>
export default {
  name: 'Download',
  components: {},
  data() {
    return {
      versions: [
        {
          title: 'shidao-DMS_0.0.1',
          date: '2021-09-17',
          desc: '1.最新上线',
          apps: [
            {
              name: 'shidao-dms-v0.0.1-win-x64.zip',
              url: ''
            },
            {
              name: 'shidao-dms-v0.0.1-mac-x64.zip',
              url: ''
            }
          ]
        }
      ]
    }
  },
  created() {

  },
  methods: {
  }
}
</script>

<style scoped lang="scss">
.download-container{
  border-left: 2px solid rgb(208, 215, 222);
  border-top: 2px solid rgb(208, 215, 222);
  margin-top: 20px;
  min-width: 500px;
}

.v-list{
  border-bottom: 2px solid rgb(208, 215, 222);
  padding-bottom: 20px;
  padding-left: 10px;
  .title{
    color: #0969da;
  }
  .date{
    color: #777;
    font-weight: normal;
  }
  .note{
    padding: 10px 0;
    border-top: 1px solid #ddd;
    //border-bottom: 1px solid #ddd;
  }
  a{
    padding: 5px 0;
    margin:0;
    display: block;
    color: #444;
    text-decoration: none;
  }
}
</style>
